<%--
  Created by IntelliJ IDEA.
  User: product
  Date: 2023/9/28
  Time: 14:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>添加商品</title>
    <link rel="stylesheet" href="/static/css/form.css">
    <link rel="stylesheet" href="/static/iconfont/iconfont.css">
    <style>
        .imgs>img{
            height: 50px;
            width: 50px;
        }
        .hh-upload-item-multiple>i{
            font-size: 50px;
        }
        .hh-upload-item-multiple {
            border: 1px dashed #9E9E9E;
            cursor: pointer;
        }
        .imgs{
            display: none;
            gap: 5px;
        }
    </style>
</head>
<body>
<form action="" class="hh-form">
    <div class="form-item">
        <label class="hh-label">商品名称：</label><input type="text" class="hh-input hh-input-big" name="name" required>
    </div>
    <div class="form-item">
        <label class="hh-label">商品描述：</label><input type="text" class="hh-input hh-input-big" name="desc" required>
    </div>
    <div class="form-item">
        <label class="hh-label">商品图片：</label>
        <input type="file" class="hh-upload">
        <div class="hh-upload-item">
            <img>
            <i class="iconfont icon-shangchuan"></i>
            <input type="hidden" name="img" id="img">
        </div>
    </div>
    <div class="form-item">
        <label class="hh-label">商品详情图：</label>
        <input type="file" class="hh-upload" multiple>
        <div class="imgs">
        </div>
        <div class="hh-upload-item-multiple">
            <i class="iconfont icon-add"></i>
            <input type="hidden" name="detailsImg" id="detailsImg">
        </div>
    </div>
    <div class="form-item">
        <label class="hh-label">商品价格：</label><input type="number" class="hh-input hh-input-big" name="price" required>
    </div>
    <div class="form-item">
        <label class="hh-label">所属分类：</label>
        <select name="productTypeId" class="hh-input hh-input-big">
            <c:forEach items="${types}" var="type">
                <option value="${type.id}">${type.name}</option>
            </c:forEach>
        </select>
    </div>
    <div class="form-item">
        <label class="hh-label">所属品牌：</label>
        <select name="brandId" class="hh-input hh-input-big">
        </select>
    </div>
    <div class="form-item">
        <label class="hh-label"></label>
        <input type="submit" class="hh-bt hh-bt-primary submit" value="提交">
        <input type="button" class="hh-bt hh-bt-warning close" value="关闭">
    </div>
</form>
<script src="/static/js/jquery/jquery-3.7.1.min.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script>
    //商品图片框被点击时
    $(".hh-upload-item").click(function () {
        $(".hh-upload:eq(0)").click();
    })

    //商品详情图框被点击时
    $(".hh-upload-item-multiple").click(function () {
        $(".hh-upload:eq(1)").click();
    })

    //商品图片上传方法
    $(".hh-upload:eq(0)").change(function () {
        let files = $(".hh-upload:eq(0)").prop("files");
        let formData = new FormData();
        formData.append("file", files[0]);
        $.ajax({
            url: '/file/upload',                             //请求地址
            type: 'post',                               //请求方法
            data: formData,
            processData: false,                         //阻止序列化表单（key=value）
            contentType: false,                         //设置内容类型为非普通表单内容
            dataType: 'json',
            success: function (e) {
                $("#img").val(e.message);
                $(".hh-upload-item>i").hide();
                $(".hh-upload-item>img").attr("src", "/file/show?name="+e.message);
                $(".hh-upload-item>img").show();
            }
        })
    })

    //商品详情图上传方法
    $(".hh-upload:eq(1)").change(function () {
        let files = $(".hh-upload:eq(1)").prop("files");
        let formData = new FormData();
        for (let file of files) {
            formData.append("files", file);
        }
        $.ajax({
            url: '/file/upload',                             //请求地址
            type: 'post',                               //请求方法
            data: formData,
            processData: false,                         //阻止序列化表单（key=value）
            contentType: false,                         //设置内容类型为非普通表单内容
            dataType: 'json',
            success: function (e) {
                $("#detailsImg").val(e.message);
                $(".imgs").empty();
                let arr = e.message.split(",");
                for (let img of arr) {
                    let $img = $("<img>").attr("src", "/file/show?name="+img);
                    $(".imgs").append($img);
                }
                $(".imgs").css("display", "flex");
            }
        })
    })

    //所属分类下拉框改变时，触发品牌下拉框数据重新渲染
    $('[name="productTypeId"]').change(function () {
        let productTypeId = $('[name="productTypeId"]').val();
        $.post('/brand/getByTypeId?productTypeId='+productTypeId, function (e) {
            if(e.result){
                $('[name="brandId"]').empty();
                for(let brand of e.data){
                    console.log(e.data)
                    let op = $("<option>").text(brand.brandName).val(brand.id);
                    $('[name="brandId"]').append(op);
                }
            }else{
                layer.msg(e.message, {icon: 2});
            }
        })
    })

    $('[name="productTypeId"]').trigger("change");

    //提交
    $("form").submit(function () {
        let data = $('form').serialize();
        $.post('/admin/product/add', data, function (e) {
            console.log(e)
            if(e.result){
                //成功提示
                parent.layer.msg(e.message, {icon: 1});
                //关闭弹窗
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
                //刷新列表
                $(".right-body", parent.document).load("/admin/product/page");
            }else{
                layer.msg(e.message, {icon: 2});
            }
        })
        //阻止事件冒泡
        return false;
    })

    //关闭按钮
    $(".close").click(function () {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    })
</script>
</body>
</html>
